<template>
  <div class="address-select">
    <el-select v-model="province" placeholder="请选择省" @change="provinceChange">
      <el-option
        v-for="item in provinces"
        size="small"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="city" placeholder="请选择市" @change="cityChange">
      <el-option
        v-for="item in citys"
        size="small"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="area" placeholder="请选择区" @change="areaChange">
      <el-option
        v-for="item in areas"
        size="small"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import regionData from '@/utils/Area.json'
export default {
  data() {
    return {
      provinces: regionData,
      citys: [],
      areas: [],
      province: '',
      city: '',
      area: ''
    }
  },
  methods: {
    init() {
      this.province = this.provinces[0].value
      this.provinceChange()
    },
    provinceChange() {
      this.citys = []
      this.city = ''
      let tmp = this.provinces.find(v => v.value == this.province)
      this.citys = tmp?.children
      this.city = tmp.children[0].value
      this.cityChange()
    },
    cityChange() {
      this.areas = []
      this.area = ''
      let tmp = this.citys.find(v => v.value == this.city)
      this.areas = tmp?.children
      this.area = tmp.children[0].value
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.address-select {
  display: flex;
  justify-content: space-between;
  .el-select + .el-select {
    margin-left: 14px;
  }
}
.el-select-dropdown__item {
  font-size: 12px;
}
</style>
